import React from "react";
import { Select, Input, Button } from "antd";

type SearchItem = {
  id: number;
  label: string;
  value: string;
  type: string;
};
const SearchBox = () => {
  const searchList: SearchItem[] = [
    {
      id: 1,
      label: "菜单名称",
      value: "menuName",
      type: "input",
    },
    {
      id: 2,
      label: "状态",
      value: "status",
      type: "select",
    },
  ];
  return (
    <div className="flex gap-3 items-center">
      {searchList.map((item) => {
        return (
          <div className="flex gap-3 items-center">
            <span>{item.label}</span>
            {item.type === "input" ? (
              <Input placeholder={`请输入${item.label}`} />
            ) : (
              <Select
                placeholder={`请选择${item.label}`}
                options={[
                  { value: 1, label: "启用" },
                  { value: 0, label: "禁用" },
                ]}
              />
            )}
          </div>
        );
      })}
      <Button type="primary">搜索</Button>
      <Button  >重置</Button>
    </div>
  );
};
export default function MenuSetting() {
  return (
    <div className="flex flex-col gap-4">
      <SearchBox />
    </div>
  );
}
